<script setup>
import { onMounted, ref } from 'vue';
import { getDepts,addDept,queryId,updateDept,deleteDept} from '@/api/dept';
import { ElMessage,ElMessageBox } from 'element-plus';
    // 查询部门列表
 const search  = async () => {
      const result =   await getDepts();
      if (result.code ) {
        DeptList.value = result.data;
      }else {
        ElMessage.error(result.msg);
      }
      
 }
//钩子函数
onMounted( () => {
  search();
});
// 表格数据
const DeptList = ref([]);
//对话框标题
const handleTitle = ref('');
// 修改操作
const handleEdit = async (id) => {
  handleTitle.value = '修改部门信息';
  dialogVisible.value = true;

  const result = await queryId(id)
  if(result.code){
    dept.value = result.data;
  } 
};

// 删除操作
const handleDelete = (id) => {
  console.log('删除', id);
  //删除部门时, 需要弹出一个确认框, 如果是确认, 则删除部门
  ElMessageBox.confirm('此操作将永久删除该部门, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 删除部门
    const result = await deleteDept(id)
    if(result.code){
      ElMessage.success('删除成功')
      search();
    }else{
      ElMessage.error(result.msg);
    }
  })
};
// 新增部门对话框相关逻辑
const formRef = ref(null);
const dialogVisible = ref(false);
const dept = ref({
  name: ''
});

const rules = ref({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ]
});
const handleAdd = () => {
  handleTitle.value = '新增部门';
  dialogVisible.value = true;
  formRef.value.resetFields();
  dept.value = {};
};
const handleCancel = () => {
  dialogVisible.value = false; 
  formRef.value.clearValidate();
  dept.value.name  = '';
};
//添加部门
const handleSubmit = async () => {
  await formRef.value.validate();
  let result = null;
  if(dept.value.id){
    console.log(dept.value);
    result = await updateDept(dept.value);
  }else {
     result = await addDept(dept.value);
  }
  if (result.code) {
    ElMessage.success('操作成功');
    dialogVisible.value = false;
    dept.value.name = '';
    search(); // 刷新部门列表
  } else {
    ElMessage.error(result.msg);
  }
};

</script>

<template>
  <h1>部门管理</h1>
    <el-button type="primary" style="float: right;" @click="handleAdd">新增部门</el-button><br><br>
    <!-- 部门表格 -->
    <el-table :data="DeptList" border style="width: 100%">
    <!-- 序号列 -->
    <el-table-column type="index" label="序号" width="100" />
    
    <!-- 部门名称列 -->
    <el-table-column prop="name" label="部门名称" width="400" />
    
    <!-- 最后修改时间列 -->
    <el-table-column prop="updateTime" label="最后修改时间" width="550" />
    
    <!-- 操作列 -->
    <el-table-column label="操作" width="200" align="center">
      <template #default="scope">
        <el-button type="primary" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
        <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增部门的对话框 -->
  <!-- 新增部门的对话框 -->
  <el-dialog v-model="dialogVisible" :title="handleTitle" width="30%">
    <el-form :model="dept" :rules="rules" ref="formRef">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="dept.name" placeholder="请输入部门名称"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>
